iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
自我挑戰組

Rayeee 的 TypeScript 的學習日記系列 第 8

<20230909> Day8. Tuple 元組

  • 分享至 

  • xImage
  •  

昨天提到了 TypeScript 中的 Array,今天來說說跟 Array很像的 Tuple

今日大綱

  • Tuple

Tuple

結構上跟 Array 很像,實作上的跟 Array 也很像
JavaScript 中並沒有 Tuple 的概念,可以說是 TypeScript 把它引進的
TypeScript 轉換成 JavaScript 程式碼之後,也看不出 ArrayTuple 的差別

關於 Tuple 的定義:

  1. 長度固定的 Array
  2. 每個位置的參數都有各自的類別
  3. 順序有特定意義

下面是基本的寫法:

let tupleMenu: [string, number, boolean] = ['Stinky tofu',50 , false]

跟 Array 很像,但是在參數中指定了型別
這樣寫,這個 tupleMenu 就是 Tuple Type

其中的
tupleMenu[0] 就是 string Type
tupleMenu[1] 就是 number Type
tupleMenu[2] 就是 boolean Type
對 TypeScript 來說,該位置上的型別就是固定的不會更動

https://ithelp.ithome.com.tw/upload/images/20230909/20162544euCP8FjQs7.png

像下圖中要把 tupleMenu[0] 換成 string Type 的值就會報錯
https://ithelp.ithome.com.tw/upload/images/20230909/20162544Mn5SH3vMut.png

Tuple 的長度也要是固定的
像下圖一開始宣告賦值的時候就會檢查長度,錯誤也會報錯
https://ithelp.ithome.com.tw/upload/images/20230909/20162544v1pmqXCR6V.png

但剛剛在實驗的過程中 抱佛腳的過程 發現如果手動改變 Tuple 的長度,TypeScript 不會報錯
這個我一時找不到答案,之前我一直認為 Tuple 建立時長度也會固定,後續也無法改變才對,先列入 TODO 中 Orz 之後查到了會在後面補上的 🫠🫠🫠 ...
https://ithelp.ithome.com.tw/upload/images/20230909/20162544uAANAtYE5O.png

那那那

為啥用 Tuple 呢老鐵,折騰自己啊這是
我們什麼情況下會使用到 Tuple 呢?

當初在學習 TypeScript 的時候也是這樣想,我有陣列就好了啊,自由自在多奔放,誰會限定陣列中特定位置參數的型別呀, 遇到 Tuple 類型的演算法也直接跳過,好耶!

https://ithelp.ithome.com.tw/upload/images/20230909/20162544keb6CrNAiE.png

直到有次參與到一個專案,接觸到 .csv 檔案,我才發現原來 Tuple 可以用在這種地方

簡單說一下 .csv 是啥米?

維基百科直接解釋 CSV(Comma-Separated Values),意思就是逗號分隔值
就是說,CSV 檔案是以逗號分隔取值的格式
就我的認知簡單解釋就是 .csv 就跟 .json, .txt 都一樣是一種檔案格式,
.csv很常用在程式之間的表格轉移,就是 Excel 常輸出的格式之一啦

.csv 就是一個資料來源的格式類型
以下是一個 .csv 格式的範例文本

姓名,年齡,城市
John Doe,30,紐約
Jane Smith,25,洛杉磯
Bob Johnson,35,芝加哥
Alice Brown,28,舊金山

之前的工作中,公司會對接廠商的資料並且呈現在畫面上,那時廠商除了.json 以外還會直接給 .csv 格式的檔案
那時的做法是從 .csv 格式開始轉換,最後也有使用到 Tuple 來定義解析後的資料格式
類似這樣 (用上面的範例文本舉例)

type TupleType = [string, number, string];
const originData: TupleType[] = formatCsvData;

這樣我們在開發時就可很清楚的知道,欸欸欸廠商的這個資料格式是長什麼樣子,我們知道固定位置的參數是什麼型別後,對 originData 內的參數處理時也會比較方便,且 TypeScript 也會多幫我們檢查 Type 是否正確

之後也會用一個引入 .csv 檔案格式來做範例,到時候會在實際操作一次

小小補充:
今天在查相關資料時發現 PJ 大大的筆記 有提到 Tuple 更像是以 number 作為 key 的物件型別,並且多了 length 屬性
覺得這樣比喻滿有趣的,可以更加理解 Tuple 的概念
在這邊分享 PJ 大大的範例:

// 這段是 PJ 大大的舉例
interface StringNumberPair {
  length: 4;
  0: number;
  1: string;
  2: boolean;
  3: number;
  // other array methods...
}

上一篇
<20230908> Day7. TypeScript 中的 Array,不是噁瑞
下一篇
<20230910> Day9. Enum 枚舉
系列文
Rayeee 的 TypeScript 的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言